<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ page isELIgnored="false" %>
<!DOCTYPE html>

<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <title>客户管理</title>
  <link href="${pageContext.request.contextPath}/css/style.css" rel="stylesheet" type="text/css" />
  <link href="${pageContext.request.contextPath}/layui/css/layui.css"  media="all" rel="stylesheet" type="text/css" />
  <script type=javascript src="${pageContext.request.contextPath}/layui/jquery2.1.1.js" ></script>
  <script type=javascript src="${pageContext.request.contextPath}/layui/lay/modules/table.js" ></script>
  <script type=javascript src="${pageContext.request.contextPath}/layui/lay/modules/form.js" ></script>
  <script type=javascript src="${pageContext.request.contextPath}/layui/lay/modules/layer.js" ></script>
</head>

<body>
<div class="place">
  <span>位置：</span>
  <ul class="placeul">
    <li>系统管理</li>
    <li>部门管理</li>
    <li>基本内容</li>
  </ul>
</div>
<div class="rightinfo">
  <form class="layui-form">
    <div class="layui-form-item">
      <label class="layui-form-label">部门名称：</label>
      <div class="layui-input-inline">
        <input type="text" name="deptName" id="deptName" placeholder="请输入" autocomplete="off" class="layui-input" >
      </div>
      <label class="layui-form-label">所属区域：</label>
      <div class="layui-input-inline">
        <select name="provincial" id="provincial" lay-filter="provinceSelect">
          <option value="">请选择省份</option>
        </select>
      </div>
      <div class="layui-input-inline">
          <select name="city" id="city" lay-filter="citySelect">
            <option value="">请选择城市</option>
          </select>
      </div>


      <div class="layui-form-item">
        <div class="layui-btn-container" style="padding:20px 20px 0px 20px">
          <button type="button" class="layui-btn btn-search layui-btn-normal" ><i class="layui-icon layui-icon-search"></i>查询</button>
          <button type="button" class="layui-btn btn-add layui-btn-warm" lay-event="add"><i class="layui-icon layui-icon-addition"></i>添加</button>
        </div>
      </div>
      <table id="demo" lay-filter="test"></table>

    </div>
  </form>

  <script>
    layui.use(['table', 'form','layer'], function () {
      var table = layui.table,
              form = layui.form,
              layer = layui.layer,
              $ = layui.jquery;

      //赋值省份
      $.ajax({
        url: "area/getProvincialList",
        type: "post",
        dataType: "json",
        success: function(data) {
           console.log(data)
          //使用循环遍历，给下拉列表赋值
          $("#provincial").empty();
          $("#provincial").append(new Option("请选择",""))
          $.each(data.data,function (index,value) {
            $("#provincial").append(new Option(value.provincial,value.pno))//对应映射字段名 第一个为显示的值  第二个为value值
          });
          form.render("select")//重新渲染 固定写法
        }
      });
      //layui change 事件 选中省份给城市赋值
      form.on('select(provinceSelect)', function (data) {
        console.log(data.elem.name); //得到select name 属性
        console.log(data.value); //得到被选中的值
        //console.log(data.elem.value); //得到被选中的值
        $.ajax({
          url: "area/getCitylList",
          type: "post",
          dataType: "json",
          data: {
            id: data.value
          },
          success: function(data) {
            //console.log(data);
            //使用循环遍历，给下拉列表赋值
            $("#city").empty();
            $("#city").append(new Option("请选择",""))
            $.each(data.data,function (index,value) {
              $("#city").append(new Option(value.city,value.cno))//对应映射字段名 第一个为显示的值  第二个为value值
            });
            form.render("select")//重新渲染 固定写法
          }
        });
      });

//查询
      $('.btn-search').on('click', function () {
        var deptName = $('#deptName').val();
        var pno = $('#provincial').val();
        var cno = $('#city').val();
        table.reload('demo', {
          url: 'dept/getDeptList',
          method: 'post',
          dataType: 'json',
          where: { //设定异步数据接口的额外参数，任意设
            deptName: deptName,
            pno: pno,
            cno: cno,
          },
          page: {
            curr: 1 //重新从第 1 页开始
          }
        });
      });


      $('.btn-add').on('click', function () {
        layer.open({
          type: 2,
          shift: 2,
          title: '添加信息',
          area: ['1000px', '700px'],
          content: 'sys/dept/deptAdd.jsp',
          btnAlign: 'c',
          btn: ['关闭'],
        });
        form.render();
      });

      table.render({
        elem: '#demo'
        ,height: 400
        ,url: 'dept/getDeptList' //数据接口
        ,page: true //开启分页
        ,limits: [1, 2, 4, 5,6,8,10]
        ,loading:true
        ,limit: 10   // 每页条数
        ,toolbar: 'default' //开启头部工具栏，并为其绑定左侧模板
        ,cellMinWidth: 0 //全局定义常规单元格的最小宽度，layui 2.2.1 新增
        ,cols: [[ //表头
          {type: 'checkbox', fixed: 'left'}
          ,{field: 'id', title: '序号',type:'numbers', sort: true, fixed: 'left',align: "center" }
          ,{field: 'deptNo', title: '部门编号', sort: true,align: "center"}
          ,{field: 'deptName', title: '部门名称', align: "center"}
          ,{field: 'cid', title: '所属地区', align: "center",
            templet: function (res) {
                return res.city.provincial.provincial+res.city.city;
            }}
          /*,
      templet:function(res){
        var area = res.province+res.city
        return area
      }*/
          ,{field: 'status', title: '状态',align: "center",
            templet:function(res){
              if(res.status=='1'){
                return '正常';
              }else{
                return '不正常';
              }
            }
          }
          ,{fixed: 'right',title: '操作',toolbar: '#barDemo',width:220 , align: "center"}
        ]]
        /*,done: function (){
          $("[data-field='birthday']").css('display','none');
          $("[data-field='password']").css('display','none');
        }*/
      });

      //工具条事件
      table.on('tool(test)', function(obj){ //注：tool 是工具条事件名，test 是 table 原始容器的属性 lay-filter="对应的值"
        var data = obj.data; //获得当前行数据
        console.log("--------")
        console.log(data)
        console.log("--------")
        var layEvent = obj.event; //获得 lay-event 对应的值（也可以是表头的 event 参数对应的值）
        var tr = obj.tr; //获得当前行 tr 的 DOM 对象（如果有的话）

         if(layEvent == 'edit'){ //修改
          layer.open({
            type: 2,
            shift: 2,
            title: '修改信息',
            area: ['1000px', '700px'],
            content: 'sys/dept/deptUpdate.jsp',
            success: function (layero, index) {
              var body = layer.getChildFrame('body', index);
              body.find("#id").val(data.id);
              body.find("#deptNo").val(data.deptNo);
              body.find("#deptName").val(data.deptName);
              //body.find("#city").val(data.city.cno);//传过去的时候那边还没有遍历出option故而没用
              //body.find("#provincial").val(data.city.provincial.pno);
            },
            btn: ['关闭'],
          });
          form.render();
        }

        if(layEvent == 'logout'){
          layer.open({
            type:1,
            title: '提示信息'
            ,btnAlign: 'c',
            content: '<div style="padding: 20px 80px;">是否将该部门注销?</div>',
            area: ['300px'],
            btn: ['确定','关闭'],
            yes: function(index, layero){
              $.ajax({
                url: 'dept/upadteDeptstatusTo0',
                type: 'post',
                data: {
                  deptNo: data.deptNo //传给后台的参数名：参数值（data.empNo表示本行数据的empNo属性值）
                },
                dataType: 'json',
                success: function (resp) {
                  if (resp.success) {
                    layer.msg("离职成功!");
                    table.reload('#demo', {
                      where: {},
                      page: {
                        curr: 1 //重新从第 1 页开始
                      }
                    });
                  }
                }
              });
              //do something
              layer.close(index); //如果设定了yes回调，需进行手工关闭
              parent.layui.table.reload('demo',{page:{curr:1}})
            }
          });
          form.render();
        }

        if(layEvent == 'recover'){
          layer.open({
            type:1,
            title: '提示信息'
            ,btnAlign: 'c',
            content: '<div style="padding: 20px 80px;">是否将该部门恢复使用?</div>',
            area: ['300px'],
            btn: ['确定','关闭'],
            yes: function(index, layero){
              console.log(data)
              console.log(data.empNo)
              console.log(data.status)
              $.ajax({
                url: 'dept/upadteDeptstatusTo1',
                type: 'post',
                data: {
                  deptNo: data.deptNo  //传给后台的参数名：参数值（data.empNo表示本行数据的empNo属性值）
                },
                dataType: 'json',
                success: function (resp) {
                  if (resp.success) {
                    layer.msg("恢复成功!");
                    table.reload('#demo', {
                      where: {},
                      page: {
                        curr: 1 //重新从第 1 页开始
                      }
                    });
                  }
                }
              });
              //do something
              layer.close(index); //如果设定了yes回调，需进行手工关闭
              parent.layui.table.reload('demo',{page:{curr:1}})
            }
          });
          form.render();
        }
        form.render();
    });
      form.render();
});
  </script>

  <script type="text/html" id="barDemo">
    <a class="layui-btn layui-btn-xs layui-btn-primary" lay-event="edit">修改</a>
    {{# if(d.status=='1'){ }}
    <a class="layui-btn  layui-btn-xs layui-btn-danger" lay-event="logout">注销</a>
    {{# }else{ }}
    <a class="layui-btn  layui-btn-xs layui-btn-warm" lay-event="recover">恢复</a>
    {{# } }}
  </script>
</div>
</body>
</html>
